<style type="text/css">
	.tmpl-goodsImage ul.records{
		/*margin: 0 auto;*/
		width: 1065px;
		background-color: #fcfffc;
		zoom: 1;
		overflow: auto;
	}
	.tmpl-goodsImage ul.records li.changetime{margin-right:0px;}
	.tmpl-goodsImage ul.records li.firstline{margin-top:0px;}
	.tmpl-goodsImage ul.records li{
		width: 210px;
		height: 210px;
		overflow: hidden;
		float: left;
		padding:0;
		margin-top: 1px;
		margin-right: 1px;
		overflow: hidden;
		position: relative;
		background-color: #ffffff;
		float: left;
		list-style-type:none;
		border: 1px solid #c0cfc0;
	}
	.tmpl-goodsImage ul.records li div{
		clear: both;
		opacity: 0.6;
		padding: 5px 0;
		text-align:center;
		position:absolute;	
		bottom: 0;
		z-index:4;
		background-color: #f999f9;
		font-size: 12px;
		text-shadow: 0 1px #fcccfc;
		width: 100%;
	}

	.tmpl-goodsImage > div.pagination{
		margin-top: 20px;
	}
</style>

<ul class="btn">
	<li><a href="javascript:void(0);" class="btn gen">重新生成</a></li>
	<li><a href="javascript:void(0);" class="btn sort" data-field="0">按名称排序</a></li>
	<li><a href="javascript:void(0);" class="btn sort" data-field="1">按宽度排序</a></li>
	<li><a href="javascript:void(0);" class="btn sort" data-field="2">按高度排序</a></li>
	<li><a href="javascript:void(0);" class="btn sort" data-field="3">按大小排序</a></li>
</ul>

<ul class="records">
	<li>
		<img src="" alt="" title="" data-src=""/>
		<div></div>
	</li>
</ul>
<div class="pagination"></div>

<script type="text/x-tmpl" class="list-tmpl">
	<% for(var i=0,l=records.length;i<l;i++) { %>
		<li>
			<img src="../cloudfront/images/phone_goods/<%=records[i]['name']%>" alt="" title="" data-src=""/>
			<div><%=records[i]['name']%> <%=records[i]['width']%>x<%=records[i]['height']%></div>
		</li>
	<% } %>
</script>